// 统一注册所有的全局组件, 自定义指令
// 骨架屏组件
import XtxSkeleton from '@/components/skeleton/index.vue'
// 轮播图组件
import XtxCarousel from '@/components/carousel/index.vue'
// 查看更多组件
import XtxMore from '@/components/more/index.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
// 默认图片
import defaultImg from '@/assets/images/200.png'
// 面包屑组件
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
// 城市选择
import XtxCity from '@/components/city/index.vue'
// 数量选择组件
import XtxNumbox from '@/components/numbox/index.vue'
// 按钮组件
import XtxButton from '@/components/button/index.vue'
// 复选框组件
import XtxCheckBox from '@/components/checkbox/index.vue'
// 消息提示组件
import XtxMessage from '@/components/message/message.vue'
// 对话框组件
import XtxDialog from '@/components/dialog/index.vue'
export default {
  // App vue框架提供的类型
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component('XtxCarousel', XtxCarousel)
    app.component('XtxMore', XtxMore)
    app.component('XtxBread', XtxBread)
    app.component('XtxBreadItem', XtxBreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckBox', XtxCheckBox)
    app.component('XtxMessage', XtxMessage)
    app.component('XtxDialog', XtxDialog)

    // <img v-lazy="aa" >
    // 全局的自定义指令: v-lazy
    app.directive('lazy', {
      // v2 inserted() {}  指令所在的元素被插入到页面中的时候会触发
      // v3 mounted() {}   ......
      // el 目标元素
      // binding 指令的相关信息
      // value 指令所绑定的值
      mounted(el: HTMLImageElement, { value }) {
         const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            // isIntersecting 是否进入到可视区
            // stop 停止监听
            // el 监听的元素
            if (isIntersecting) {
              stop()
              // 目标: 给el设置src属性
              el.src = value
              // 如果图片加载失败了, 提供默认图片
              el.onerror = () => {
                el.src = defaultImg
              }
            }
         }, {
          threshold: 0 // 容器和可视区交叉的占比(默认的阈值是0.2左右)
         })
      }
    })

  }
}
